<template>
    <div>
        <el-tabs v-model="activeShop" type="card" @tab-click="tab=>handleClick(tab.name)">
            <el-tab-pane label="全部" name="全部"></el-tab-pane>
            <el-tab-pane v-for="i in platformData" :key="i.value" :label="i.label" :name="i.value"></el-tab-pane>
        </el-tabs>
        <el-table
            :data="tableData"
            border
            stripe
        >
            <el-table-column
                prop="code"
                label="CODE">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="tag"
                label="分类">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格">
            </el-table-column>
            <el-table-column
                label="操作">
                <template #default="scope">
                    <div class="controlBth">
                        <el-button size="mini" @click="handleShow(scope.row)">显示</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import flatten from 'lodash/flatten';
import isEmpty from 'lodash/isEmpty';
import {setMenuStatus} from "@/api/user";
import {getTag} from "@/api/tag";
export default {
    name: "hide",
    computed:{
        ...mapGetters([
            'hideOrderMenus'
        ])
    },
    data(){
        return {
            activeShop:'全部',
            platformData:[],
            tableData:[]
        }
    },
    methods:{
        handleClick(platform){
            platform=platform==='全部'?'':platform
            this.getLocalData(platform)
        },
        getTag(data){
            getTag(data).then(res=>{
                this.platformData=res.data
            })
        },
        getLocalData(platform=''){
            const hideOrderMenus=isEmpty(this.hideOrderMenus)?[]:flatten(Object.values(this.hideOrderMenus))
            this.tableData=hideOrderMenus.filter(item=>item.platform.includes(platform))
        },
        handleShow(item){
            const username=this.userInfo.username
            setMenuStatus({item,username,platform:item.platform}).then(res=>{
                this.$message.success(res.msg)
                this.$store.commit('user/SET_HIDE_MENUS',res.data)
                this.getLocalData()
            })
        },
    },
    created() {
        this.getTag({type:0})
        this.getLocalData()
    }
}
</script>

<style scoped>

</style>